<template>
  <!-- 立即预定页面 -->
  <div class="reservation">
    <!-- navbar标题栏 -->
    <van-nav-bar title="宠物寄养" left-text="返回" left-arrow @click-left="goBack" />
    <!-- 联系人卡片 -->
    <!-- 显示联系人信息 -->
    <van-contact-card
      v-if="currentContact"
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <!-- 显示添加联系人 -->
    <van-contact-card type="add" @click="onAdd" v-else />
    <!-- 服务宠物 -->
    <div class="add-pets">
      <div class="add-service">服务宠物</div>
      <div class="add-photo">
        <!-- 动态头像 -->
        <div
          class="photo-one"
          v-for="item in petList"
          :key="item.p_id"
          @click="selectHandle(item.p_id)"
        >
          <!-- 徽标 -->
          <van-badge>
            <van-image round width="4rem" height="4rem" :src="item.p_img" />
            <template #content v-if="item.p_id==currentId">
              <van-icon name="success" class="badge-icon"></van-icon>
            </template>
          </van-badge>
          <div class="photo-name">{{item.p_name}}</div>
        </div>
        <!-- 添加按钮 -->
        <div class="photo-one" @click="goAddPet">
          <van-icon name="add-o" size="4rem" color="#b6b4c1"></van-icon>
          <div class="photo-name">添加</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["b_id", "b_name", "b_price"],
  data() {
    return {
      currentId: "", // 当前选中图标的id
      // 存放联系人信息
      currentContact: null,
      petList: [] // 存放宠物
    };
  },
  async mounted() {
    await this.getContact();
    await this.getPetList();
  },
  methods: {
    /**
     * 选中需要寄养的宠物
     */
    selectHandle(id) {
      this.currentId = id;
    },
    /**
     * 获取宠物列表
     */
    getPetList() {
      this.http
        .get(this.$api.getPetAll)
        .then(res => res.data)
        .then(res => {
          if (res.code == 200) {
            console.log("获取服务端宠物列表数据：", res.data);
            this.petList = res.data;
          }
        });
    },
    /**
     * 获取默认联系人
     */
    getContact() {
      this.http
        .get(this.$api.getContact)
        .then(res => res.data)
        .then(res => {
          if (res && res.data) {
            this.currentContact = res?.data[0];
          }
        });
    },
    /**
     * 添加联系人
     */
    onAdd() {
      // 跳转到添加联系人界面
      this.$router.push("/contactAdd");
    },
    /**
     * 编辑联系人
     */
    onEdit() {
      // 跳转到联系人列表
      this.$router.push("/contactList");
    },
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 跳转到宠物资料界面
     */
    goAddPet() {
      this.$router.push("/pet");
    }
  }
};
</script>

<style lang="scss" scoped>
.van-contact-card::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: -webkit-repeating-linear-gradient(
    135deg,
    #ff6c6c 0,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #f8e176 0,
    #f8e176 45%,
    transparent 0,
    transparent 50%
  );
  background: repeating-linear-gradient(
    -45deg,
    #ff6c6c 0,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #f8e176 0,
    #f8e176 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 80px;
  content: "";
}

.add-service {
  margin: 1rem auto;
  margin-left: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  width: 90%;
}
.add-photo {
  display: flex;
  overflow-y: hidden;
  overflow: hidden;
  overflow-x: scroll;
  padding-top: 1rem;
  width: 90%;
  margin: 0 auto;
  align-items: center;
  .photo-one {
    width: 4rem;
    margin: 0 1.4rem;
  }
  .photo-name {
    text-align: center;
    margin: 1rem auto;
  }
}
.add_photo::-webkit-scrollbar {
  display: none;
}
</style>